<template>
  <div class="report">
    <div class="report_title">
      <el-input class="report_title_content report_title_content_input" v-model="input" placeholder="请输入内容"></el-input>

      <el-button class="report_title_content" type="primary">搜索</el-button>

      <el-date-picker
          style="float: right;"
          v-model="num"
          type="month"
          placeholder="选择月"
          format="yyyy年MM月"
          value-format="timestamp"
          @change="handleChange">
      </el-date-picker>

      <el-upload
          style="float: left; margin-left: 3%"
          :action="url"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          multiple>
        <el-button type="info" class="el-icon-upload2 report_title_content report_title_content_button">上传</el-button>
      </el-upload>

      <el-button type="warning" class="el-icon-download report_title_content report_title_content_button">下载</el-button>

      <el-button class="report_title_content report_title_content_set_header" type="danger" @click="dialogVisible = true">表头设置</el-button>

      <el-dialog
          title="设置"
          :visible.sync="dialogVisible"
          :modal-append-to-body="false"
          width="30%">
        <el-tree
            :props="headerProp"
            :data="headers"
            show-checkbox
            node-key="id"
            :default-checked-keys="[100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100]"
            @check-change="handleCheckChange">
        </el-tree>
      </el-dialog>

      <el-tooltip class="report_title_content report_title_content_button" effect="dark" :content="expire" placement="right">
        <el-button>到期报告</el-button>
      </el-tooltip>
    </div>
    <div class="report_body">
      <el-table
          :data="list"
          style="width: 100%">
        <el-table-column
            v-for="(v,idx) in headers" :key="idx"
        :label="v.label" :prop="v.prop" width="120" align="center">
          <el-table-column v-for="(i,idx) in v.props" :key="idx"
                           :label="i.label" :prop="i.prop" width="120" align="center">
            <el-table-column v-for="(j,idx) in i.props" :key="idx"
                             :label="j.label" :prop="j.prop" width="120" align="center"></el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column
            align="center"
            fixed="right"
            width="120"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="update"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
          title="提示"
          :visible.sync="updateDialog"
          :modal-append-to-body="false"
          width="30%">
        <el-form :rules="rules" style="width: 100%" ref="form" :model="updateForm" label-width="8rem">
          <el-form-item label="实际到账" prop="actualCharge">
            <el-input v-model="updateForm.actualCharge"></el-input>
          </el-form-item>
          <el-form-item label="票据情况" prop="billStatus">
            <el-input v-model="updateForm.billStatus"></el-input>
          </el-form-item>
          <el-form-item label="资料是否完整" prop="isComplete">
            <el-switch
                v-model="updateForm.isComplete"
                active-text="是"
                inactive-text="否">
            </el-switch>
          </el-form-item>
          <el-form-item label="归档情况" prop="isCd">
            <el-switch
                v-model="updateForm.isCd"
                active-text="是"
                inactive-text="否">
            </el-switch>
          </el-form-item>
          <el-form-item label="归档日期" prop="cdTime">
            <el-date-picker
                v-model="updateForm.cdTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="未存档原因" prop="unKeep">
            <el-input v-model="updateForm.unKeep"></el-input>
          </el-form-item>
          <el-form-item label="报告作废" prop="isCancel">
            <el-switch
                v-model="updateForm.isCancel"
                active-text="是"
                inactive-text="否">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">确定</el-button>
            <el-button type="info" @click="resetForm('form')">重置</el-button>
            <el-button @click="updateDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <div class="report_foot">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getList} from "@/api/Report";

export default {
name: "ReportManage",
  data(){
    return{
      expire: 0,
      num: new Date(),
      input: '',
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      dialogVisible: false,
      updateDialog: false,
      updateForm: {
        actualCharge: 0,
        chargeTime: new Date(),
        billStatus: '',
        isComplete: false,
        isCd: false,
        cdTime: new Date(),
        unKeep: '',
        isCancel: false,
      },

      rules: {
        actualCharge: [
          { required: true, message: '请输入正确的数字', trigger: 'blur' },
          {
            required: true,
            pattern: /^[-+]?\d*\.?\d*$/,
            message: '请输入正确的数字',
            trigger: 'blur'
          }
        ]
      },

      url: process.env.VUE_APP_BASE_API + '/report/excel/upload',
      dHeaders: [],
      headerProp: {
        label: 'label',
        children: 'props'
      },
      headers: [
        {
          id: 100,
          pid: 0,
          label: 'ID',
          prop: 'id'
        },
        {
          id: 200,
          pid: 0,
          prop: "preReportId",
          label: "预评报告编号"
        },
        {
          id: 300,
          pid: 0,
          prop: "formalReportId",
          label: "正式报告编号"
        },
        {
          id: 400,
          pid: 0,
          label: '评估报告',
          props: [
            {
              id: 401,
              pid: 400,
              prop: "reportName",
              label: "报告名称"
            },
            {
              id: 402,
              pid: 400,
              prop: "owner",
              label: "产权人"
            },
            {
              id: 403,
              pid: 400,
              prop: "ownerPosition",
              label: "估价对象位置"
            },
            {
              id: 404,
              pid: 400,
              prop: "reportType",
              label: "评估报告类型"
            },
            {
              id: 405,
              pid: 400,
              prop:"property",
              label: "用途"
            },
            {
              id: 406,
              pid: 400,
              prop: "buildingArea",
              label: "建筑面积（㎡）"
            },
            {
              id: 407,
              pid: 400,
              prop: "landArea",
              label: "土地面积（㎡）"
            },
            {
              id: 408,
              pid: 400,
              prop: "landNumber",
              label: "宗地数"
            },
            {
              id: 409,
              pid: 400,
              prop: "appraiserTime",
              label: "估价时点"
            },
            {
              id: 410,
              pid: 400,
              prop: "appraiserObjective",
              label: "估价目的"
            },
            {
              id: 411,
              pid: 400,
              prop: "methods1",
              label: "估价方法1"
            },
            {
              id: 412,
              pid: 400,
              prop: "methods2",
              label: "估价方法2"
            },
            {
              id: 413,
              pid: 400,
              prop: "methods3",
              label: "估价方法3"
            },
            {
              id: 414,
              pid: 400,
              prop: "methods4",
              label: "估价方法4"
            },
            {
              id: 415,
              pid: 400,
              prop: "appraisePrice",
              label: "估价总值"
            },
            {
              id: 416,
              pid: 400,
              prop: "appraiseUnitPrice",
              label: "评估单价（万/平方米）"
            },
            {
              id: 417,
              pid: 400,
              prop: "startTime",
              label: "开始日期"
            },
            {
              id: 418,
              pid: 400,
              label: "询价/预评",
              props: [
                {
                  id: 418001,
                  pid: 418,
                  prop: "preCreateTime",
                  label: "生成年月"
                },
                {
                  id: 418002,
                  pid: 418,
                  prop: "preEndTime",
                  label: "结束日期"
                }
              ]
            },
            {
              id: 419,
              pid: 400,
              label: "正式",
              props: [
                {
                  id: 419001,
                  pid: 419,
                  prop: "formalCreateTime",
                  label: "生成年月"
                },
                {
                  id: 419002,
                  pid: 419,
                  prop: "formalEndTime",
                  label: "出具日期"
                }
              ]
            },
            {
              id: 420,
              pid: 400,
              label: "估价师",
              props: [
                {
                  id: 420001,
                  pid: 420,
                  prop: "preAppraiser",
                  label: "预评"
                },
                {
                  id: 420002,
                  pid: 420,
                  prop:"formalAppraiser",
                  label: "正式"
                }
              ]
            },
            {
              id: 421,
              pid: 400,
              prop:"signers1",
              label: "签字估价师1"
            },
            {
              id: 422,
              pid: 400,
              prop:"signers2",
              label: "签字估价师2"
            }
          ]
        },
        {
          id: 500,
          pid: 0,
          label: "评估报告审核",
          props: [
            {
              id: 501,
              pid: 500,
              label: '预评（询价）',
              props: [
                {
                  id: 501001,
                  pid: 501,
                  prop: "preAppraiser1",
                  label: "一审"
                },
                {
                  id: 501002,
                  pid: 501,
                  prop: "preAppraiser2",
                  label: "二审"
                },
                {
                  id: 501003,
                  pid: 501,
                  prop: "preAppraiser3",
                  label: "三审"
                }
              ]
            },
            {
              id: 502,
              pid: 500,
              label: "正式审核",
              props: [
                {
                  id: 502001,
                  pid: 502,
                  prop: "formalAppraiser1",
                  label: "一审"
                },
                {
                  id: 502002,
                  pid: 502,
                  prop: "formalAppraiser2",
                  label: "二审"
                },
                {
                  id: 502003,
                  pid: 502,
                  prop: "formalAppraiser3",
                  label: "三审"
                }
              ]
            },
            {
              id: 503,
              pid: 500,
              prop: "finalAppraiser",
              label: "终审"
            }
          ]
        },
        {
          id: 600,
          pid: 0,
          label: "客户信息",
          props: [
            {
              id: 601,
              pid: 600,
              label: "委托方信息",
              props: [
                {
                  id: 601001,
                  pid: 601,
                  prop: "delegateName",
                  label: "委托方全称"
                },
                {
                  id: 601002,
                  pid: 601,
                  prop: "delegateUserName",
                  label: "联系人"
                },
                {
                  id: 601003,
                  pid: 601,
                  prop: "delegateUserJob",
                  label: "职务"
                },
                {
                  id: 601004,
                  pid: 601,
                  prop: "delegateUserPhone",
                  label: "电话"
                }
              ]
            },
            {
              id: 602,
              pid: 600,
              label: "银行信息",
              props: [
                {
                  id: 602001,
                  pid: 602,
                  prop: "bankName",
                  label: "银行名称"
                },
                {
                  id: 602002,
                  pid: 602,
                  prop: "bankNikeName",
                  label: "银行名称"
                },
                {
                  id: 602003,
                  pid: 602,
                  prop: "bankUserName",
                  label: "联系人"
                },
                {
                  id: 602004,
                  pid: 602,
                  prop: "bankUserJob",
                  label: "职务"
                },
                {
                  id: 602005,
                  pid: 602,
                  prop: "bankUserPhone",
                  label: "电话"
                },
              ]
            },
            {
              id: 603,
              pid: 600,
              label: "业务来源",
              prop: "businessFrom"
            }
          ]
        },
        {
          id: 700,
          pid: 0,
          label: "业务部门信息",
          props: [
            {
              id: 701,
              pid: 700,
              label: "预评",
              props: [
                {
                  id: 701001,
                  pid: 701,
                  label: "部门",
                  prop: "preDepartment"
                },
                {
                  id: 701002,
                  pid: 701,
                  label: "组别",
                  prop: "preGroup"
                },
                {
                  id: 701003,
                  pid: 701,
                  label: "业务员",
                  prop: "preUserName"
                }
              ]
            },
            {
              id: 702,
              pid: 700,
              label: "正式",
              props: [
                {
                  id: 702001,
                  pid: 702,
                  label: "部门",
                  prop: "formalDepartment"
                },
                {
                  id: 702002,
                  pid: 702,
                  label: "组别",
                  prop: "formalGroup"
                },
                {
                  id: 702003,
                  pid: 702,
                  label: "业务员",
                  prop: "formalUserName"
                }
              ]
            }
          ]
        },
        {
          id: 800,
          pid: 0,
          label: "财务信息",
          props: [
            {
              id: 801,
              pid: 800,
              label: "标准收费(元)",
              prop: 'standardCharge'
            },
            {
              id: 802,
              pid: 800,
              label: "折扣",
              prop: 'discount'
            },
            {
              id: 803,
              pid: 800,
              label: "协议金额（元）",
              prop: 'agreementCharge'
            },
            {
              id: 804,
              pid: 800,
              label: "实际到帐（元）",
              prop: 'actualCharge'
            },
            {
              id: 805,
              pid: 800,
              label: "到帐时间",
              prop: 'chargeTime'
            },
            {
              id: 806,
              pid: 800,
              label: "票据情况",
              prop: 'billStatus'
            },
          ]
        },
        {
          id: 900,
          pid: 0,
          label: "行政信息",
          props: [
            {
              id: 901,
              pid: 900,
              label: "存档情况",
              props: [
                {
                  id: 901001,
                  pid: 901,
                  label: "资料是否完整",
                  prop: "isComplete"
                },
                {
                  id: 901002,
                  pid: 901,
                  label: "归档情况",
                  prop: "isCd"
                },
                {
                  id: 901003,
                  pid: 901,
                  label: "归档日期",
                  prop: "cdTime"
                },
                {
                  id: 901004,
                  pid: 901,
                  label: "未存档原因",
                  prop: "unKeep"
                },
              ]
            }
          ]
        },
        {
          id: 1000,
          pid: 0,
          label: "备注",
          prop: "remark"
        },
        {
          id: 1100,
          pid: 901,
          label: "报告作废",
          prop: "isCancel"
        },
      ]
    }
  },

  watch: {
    headers(val){
      console.log(val)
    }
  },

  created() {
    this.lists()
    this.dHeaders = this.headers
  },
  methods: {

    uploadError(err){
      this.$notify.error(err.message);
    },

    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$notify.success('提交成功')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName){
      this.$refs[formName].resetFields();
    },

    handleChange(val){
      console.log(val)
    },

    update(){
      this.updateDialog = true
    },

    handleSizeChange(val){
      getList(this.currentPage, val).then(res => {
        this.list = res.data.data.list
        this.total = res.data.data.total
      })
    },
    handleCurrentChange(val){
      getList(val, this.pageSize).then(res => {
        this.list = res.data.data.list
        this.total = res.data.data.total
      })
    },
    lists(){
      var pageNum = this.currentPage;
      var pageSize = this.pageSize;
      getList(pageNum,pageSize).then(res => {
        // console.log(res)
        this.list = res.data.data.list
        this.total = res.data.data.total
      }).catch().finally()
    },

    uploadSuccess(res){
      this.$notify.success(res.message)
    },

    handleCheckChange(data, checked, indeterminate){
      console.log(data)
      var headers = this.headers;
      if (!checked){
        for (let i = 0; i < headers.length; i++) {
          var props = headers[i].props;
          if (props != null || props !== undefined){
            console.log(props)
          }
        }
      }else {

      }
    }
  }
}
</script>

<style scoped>
.report{
  padding: 1rem;

}
.report_title{
  width: 100%;
  /*border: 1px solid black;*/
  margin-bottom: 1%;
  overflow: hidden;
}

.report_title_content{
  float: left;
}

.report_title_content_input{
  width: 20%;
}

.report_title_content_set_header{
  margin-left: 1%;
}

.report_title_content_button{
  margin-left: 1%;
}

.report_body{

}

.report_foot{
  width: 100%;
  height: 5rem;
  /*border: 1px solid black;*/
}
</style>